<template>
  <view class="login-page" @touchmove.prevent>
    <!-- 背景装饰 -->
    <view class="bg-decoration">
      <view class="circle circle-1"></view>
      <view class="circle circle-2"></view>
      <view class="circle circle-3"></view>
      <view class="circle circle-4"></view>
      <view class="circle circle-5"></view>
      <view class="gradient-bg"></view>
    </view>

    <!-- 顶部标题 -->
    <view class="header">
      <text class="title">QXQ管理系统</text>
      <text class="subtitle">欢迎回来</text>
    </view>

    <!-- 登录表单 -->
    <view class="form-section">
      <view class="form-item" :class="{ 'focused': usernameFocused }">
        <uni-icons type="person" size="24" color="#666"></uni-icons>
        <input 
          class="input" 
          v-model="form.username" 
          placeholder="请输入用户名" 
          maxlength="30"
          @focus="usernameFocused = true"
          @blur="usernameFocused = false"
        />
      </view>

      <view class="form-item" :class="{ 'focused': passwordFocused }">
        <uni-icons type="locked" size="24" color="#666"></uni-icons>
        <input 
          class="input" 
          v-model="form.password" 
          :type="showPassword ? 'text' : 'password'" 
          placeholder="请输入密码" 
          maxlength="30"
          @focus="passwordFocused = true"
          @blur="passwordFocused = false"
        />
        <view class="password-toggle" @click="togglePasswordVisibility">
          <uni-icons :type="showPassword ? 'eye-filled' : 'eye-slash-filled'" size="24" color="#666"></uni-icons>
        </view>
      </view>

      <button 
        class="login-btn" 
        @click="onLogin" 
        :disabled="isLoading"
        :class="{ 'loading': isLoading }"
      >
        <text class="btn-text">{{ isLoading ? '登录中...' : '登录' }}</text>
        <view class="btn-shine"></view>
      </button>

      <!-- 其他登录方式 -->
      <view class="other-login">
        <view class="divider">
          <view class="line"></view>
          <text class="text">其他登录方式 （开发中）</text>
          <view class="line"></view>
        </view>
        <!-- <view class="wechat-login" @click="onWechatLogin">
          <text class="iconfont icon-weixin"></text>
          <text class="text">微信登录</text>
        </view> -->
      </view>
    </view>

    <!-- 底部装饰 -->
    <view class="footer-decoration">
      <view class="wave wave-1"></view>
      <view class="wave wave-2"></view>
      <view class="wave wave-3"></view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { IntranetConfig } from '@/static/js/config'

// 表单数据
const form = ref({
  username: '',
  password: ''
})

// 加载状态
const isLoading = ref(false)
const usernameFocused = ref(false)
const passwordFocused = ref(false)
const showPassword = ref(false)

// 切换密码显示/隐藏
const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value
}

// 微信登录处理
const onWechatLogin = async () => {

  // 微信登录正在开发中
  uni.showToast(
    {
      title: '微信登录正在开发中',
      icon: 'none'
    }
  )
  return

  try {
    // 显示加载提示
    uni.showLoading({
      title: '登录中...',
      mask: true
    })

    // // 检查是否安装了微信
    // const checkRes = await uni.getProvider({
    //   service: 'oauth'
    // })
    // if (!checkRes.providers.includes('weixin')) {
    //   throw new Error('未安装微信客户端')
    // }

    // 获取微信登录凭证
    const loginRes = await uni.login({
      provider: 'weixin',
      scopes: 'auth_base'
    })
    if (!loginRes.code) {
      throw new Error('微信登录失败')
    }
    console.log('微信登录返回：', loginRes)

    // 发送登录请求到后端
    const res = await uni.request({
      url: IntranetConfig.domain + 'api/users/wechat_login/',
      method: 'POST',
      header: IntranetConfig.headers,
      data: {
        code: loginRes.code,
        authResult: loginRes.authResult
      }
    })

    if (res.data.code === 200) {
      // 保存用户信息到本地存储
      uni.setStorageSync('user_info', res.data.data)
      
      uni.showToast({
        title: '登录成功',
        icon: 'success'
      })

      // 延迟跳转到首页
      setTimeout(() => {
        uni.reLaunch({
          url: '/pages/goods_list/goods_list'
        })
      }, 1500)
    } else {
      throw new Error(res.data.msg || '登录失败')
    }
  } catch (error) {
    console.log(error)
    uni.showToast({
      title: error.message || '登录失败',
      icon: 'error'
    })
  } finally {
    uni.hideLoading()
  }
}

// 登录处理
async function onLogin() {
  // 表单验证
  if (!form.value.username) {
    uni.showToast({
      title: '请输入用户名',
      icon: 'error'
    })
    return
  }
  if (!form.value.password) {
    uni.showToast({
      title: '请输入密码',
      icon: 'error'
    })
    return
  }

  isLoading.value = true

  try {
    const res = await uni.request({
      url: IntranetConfig.domain + 'api/users/login/',
      method: 'POST',
      header: IntranetConfig.headers,
      data: {
        username: form.value.username,
        password: form.value.password
      }
    })

    if (res.data.code === 200) {
      // 保存用户信息到本地存储
      uni.setStorageSync('user_info', res.data.data)
      
      uni.showToast({
        title: '登录成功',
        icon: 'success'
      })

      // 延迟跳转到首页
      setTimeout(() => {
        uni.reLaunch({
          url: '/pages/goods_list/goods_list'
        })
      }, 1500)
    } else {
      throw new Error(res.data.msg)
    }
  } catch (error) {
    uni.showToast({
      title: error.message || '登录失败',
      icon: 'error'
    })
  } finally {
    isLoading.value = false
  }
}
</script>

<style scoped lang="scss">
.login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 0 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  position: relative;
  overflow: hidden;
  touch-action: none; // 禁止所有触摸操作
}

.bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  overflow: hidden;
  
  .gradient-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, 
      rgba(255, 126, 45, 0.1) 0%,
      rgba(255, 184, 108, 0.1) 25%,
      rgba(255, 126, 45, 0.05) 50%,
      rgba(255, 184, 108, 0.1) 75%,
      rgba(255, 126, 45, 0.1) 100%
    );
    animation: gradientMove 15s ease infinite;
  }
  
  .circle {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 126, 45, 0.1) 0%, rgba(255, 184, 108, 0.1) 100%);
    filter: blur(20rpx);
    
    &.circle-1 {
      width: 400rpx;
      height: 400rpx;
      top: -100rpx;
      right: -100rpx;
      animation: float 6s ease-in-out infinite;
    }
    
    &.circle-2 {
      width: 300rpx;
      height: 300rpx;
      bottom: 200rpx;
      left: -150rpx;
      animation: float 8s ease-in-out infinite;
    }
    
    &.circle-3 {
      width: 200rpx;
      height: 200rpx;
      top: 40%;
      right: -50rpx;
      animation: float 7s ease-in-out infinite;
    }
    
    &.circle-4 {
      width: 250rpx;
      height: 250rpx;
      top: 20%;
      left: -100rpx;
      animation: float 9s ease-in-out infinite;
    }
    
    &.circle-5 {
      width: 180rpx;
      height: 180rpx;
      bottom: 100rpx;
      right: -80rpx;
      animation: float 5s ease-in-out infinite;
    }
  }
}

.header {
  margin-top: 120rpx;
  text-align: center;
  position: relative;
  z-index: 1;
  
  .title {
    font-size: 48rpx;
    font-weight: 600;
    background: linear-gradient(135deg, #ff7e2d 0%, #ffb86c 100%);
    -webkit-background-clip: text;
    color: transparent;
    margin-bottom: 24rpx;
    display: block;
    animation: fadeInDown 0.8s ease-out;
  }
  
  .subtitle {
    font-size: 32rpx;
    color: #666;
    display: block;
    animation: fadeInUp 0.8s ease-out;
  }
}

.form-section {
  width: 100%;
  margin-top: 80rpx;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 24rpx;
  padding: 48rpx 32rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 1;
  animation: fadeIn 0.8s ease-out;
  
  .form-item {
    display: flex;
    align-items: center;
    background: rgba(248, 249, 250, 0.8);
    border-radius: 16rpx;
    padding: 24rpx;
    margin-bottom: 32rpx;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2rpx solid transparent;
    
    &.focused {
      background: #fff;
      border-color: #ff7e2d;
      box-shadow: 0 4rpx 16rpx rgba(255, 126, 45, 0.1);
      transform: translateY(-2rpx);
    }
    
    .input {
      flex: 1;
      font-size: 30rpx;
      color: #333;
      background: transparent;
      margin: 0 24rpx;
      
      &::placeholder {
        color: #999;
      }
    }
    
    .password-toggle {
      padding: 10rpx;
      cursor: pointer;
      transition: opacity 0.3s;
      
      &:active {
        opacity: 0.7;
      }
    }
  }
  
  .login-btn {
    width: 100%;
    height: 88rpx;
    background: linear-gradient(135deg, #ff7e2d 0%, #ffb86c 100%);
    color: #fff;
    border: none;
    border-radius: 12rpx;
    font-size: 32rpx;
    font-weight: 500;
    margin-top: 48rpx;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    .btn-text {
      position: relative;
      z-index: 1;
    }
    
    .btn-shine {
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
      );
      transition: 0.5s;
    }
    
    &:active {
      transform: scale(0.98);
      
      .btn-shine {
        left: 100%;
      }
    }
    
    &:disabled {
      background: #ccc;
      transform: none;
      
      .btn-shine {
        display: none;
      }
    }
    
    &.loading {
      opacity: 0.8;
      cursor: not-allowed;
    }
  }

  .other-login {
    margin-top: 48rpx;
    
    .divider {
      display: flex;
      align-items: center;
      margin-bottom: 32rpx;
      
      .line {
        flex: 1;
        height: 1px;
        background: rgba(0, 0, 0, 0.1);
      }
      
      .text {
        padding: 0 24rpx;
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .wechat-login {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20rpx;
      
      .iconfont {
        font-size: 80rpx;
        color: #07c160;
        margin-bottom: 12rpx;
      }
      
      .text {
        font-size: 24rpx;
        color: #666;
      }
      
      &:active {
        opacity: 0.8;
      }
    }
  }
}

.footer-decoration {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200rpx;
  z-index: 0;
  overflow: hidden;
  
  .wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100rpx;
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M0 0v46.29c47.79 22.2 103.59 32.17 158 28 70.36-5.37 136.33-33.31 206.8-37.5 73.84-4.36 147.54 16.88 218.2 35.26 69.27 18 138.3 24.88 209.4 13.08 36.15-6 69.85-17.84 104.45-29.34C989.49 25 1113-14.29 1200 52.47V0z" fill="%23ff7e2d" fill-opacity=".1"/></svg>') repeat-x;
    animation: wave 10s linear infinite;
    
    &.wave-1 {
      opacity: 0.5;
      animation-delay: -5s;
    }
    
    &.wave-2 {
      opacity: 0.3;
      animation-delay: -2s;
    }
    
    &.wave-3 {
      opacity: 0.2;
      animation-delay: -7s;
    }
  }
}

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20rpx) rotate(5deg);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes wave {
  0% {
    transform: translateX(0) scaleY(1);
  }
  50% {
    transform: translateX(-25%) scaleY(1.1);
  }
  100% {
    transform: translateX(-50%) scaleY(1);
  }
}

</style> 